<template>
	<view class="page-content flex-col">
		<view class="content">
			<view class="flex-col group_3">
				<view class="flex-col items-start">
					<view style="height: 746rpx;width: 100%;">
						<u-swiper :list="list" height="746"></u-swiper>
					</view>
					<text class="mt-18 font text">{{formdata.name}}</text>
				</view>
				<view class="mt-16 flex-row justify-between items-center group_4">
					<view class="flex-row items-center">
						<image class="shrink-0 image_4" src="/static/common/sun.png" />
						<text class="ml-10 font_2">{{formdata.needIntegral}}</text>
					</view>
					<view class="flex-row items-center">
						<view class="flex-row justify-start items-center image-wrapper">
							<u-icon name="minus-circle-fill" color="#EFEFEF" size="48" @click="handleMinus"></u-icon>
						</view>
						<view class="flex-row justify-start items-center image-wrapper"><text
								class="font_2 text_2">{{buyNum}}</text></view>
						<view class="flex-row justify-start items-center image-wrapper view">
							<u-icon name="plus-circle-fill" color="#FCD610" size="48" @click="handleAdd"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-miaoshu">
				<view style="padding: 42rpx 32rpx;">
					<form-item-title text="商品描述" />
				</view>
				<view v-html="formdata.remark">
				</view>
			</view>
		</view>
		<view class="buy">
			<view class="submit" @click="handleSubmit">
				立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import shopping from "../../../../api/shopping";
	export default {
		data() {
			return {
				list: [],
				formdata: {
					id: null,
					remark: '',
					name: '',
					needIntegral: "",
					photo: "",
					stock: 100, //库存
				},
				buyNum: 1,
			};
		},
		onLoad(option) {
			this.handleGetDetailById(option.id)
		},
		methods: {
			handleGetDetailById(id) {
				shopping.getGoodsById(id).then(res => {
					if (res.code === 200) {
						this.formdata = res.data;
						if(res.data.photo)
						this.list=res.data.photo.split(',')
					}
				})
			},
			handleAdd() {
				if (this.buyNum < this.formdata.stock)
					this.buyNum++
				else
					uni.showToast({
						title: '库存不足',
						icon: "none"
					})
			},
			handleMinus() {
				if (this.buyNum > 1)
					this.buyNum--
				else
					uni.showToast({
						title: '不能再少了',
						icon: "none"
					})
			},
			handleSubmit() {
				uni.navigateTo({
					url: `/pages/sun/components/order/order?goodsId=${this.formdata.id}&num=${this.buyNum}`
				})
			},
			handleGetDetailById(id) {
				shopping.getGoodsById(id).then(res => {
					if (res.code === 200) {
						this.formdata = res.data;
					}
				})
			}
		},
		components: {
			formItemTitle
		}
	}
</script>

<style lang="scss">
	.page-content {
		background-color: #FFFFFF;
		height: 100%;

		.content {
			flex: 1;
			overflow-y: auto;

			.group_3 {
				border-bottom: solid 2rpx #f6f6f6;

				.font {
					font-size: 32rpx;
					font-family: PingFang SC;
					line-height: 29.88rpx;
					font-weight: 700;
					color: #000000;
				}

				.text {
					margin-left: 32rpx;
					line-height: 38rpx;
					width: 638rpx;
				}

				.group_4 {
					padding: 0 40rpx 30rpx;

					.image_4 {
						width: 40rpx;
						height: 40rpx;
					}

					.font_2 {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 23.74rpx;
						font-weight: 700;
						color: #000000;
					}

					.image-wrapper {
						width: 48rpx;

						.text_2 {
							line-height: 22.84rpx;
						}
					}

					.view {
						margin-left: 8rpx;
					}
				}
			}
		}

		.buy {
			padding: 28rpx 32rpx;

			.submit {
				height: 104rpx;
				background: #FCD610;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				text-align: center;
				line-height: 104rpx;
			}
		}
	}
</style>